<template>
  <div class="container">
      <div class="table-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>动态记录</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/dynamicList' }">动态列表</el-breadcrumb-item>
              <el-breadcrumb-item>点赞记录</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div style="margin: 20px;padding: 20px;background-color: #fff;">
          <div style="display: flex;align-items: center;flex-wrap: wrap;">
              <!-- <div style="display: flex;align-items: center; margin-right: 30px;">
                <el-input style="width: 300px;" clearable v-model="keyword" placeholder="请输入内容"></el-input>
                <el-button type="primary" size="medium" style="margin-left: 10px;" @click="SeachList">搜索</el-button>
            </div> -->
              <div style="display: flex;align-items: center; margin-right: 30px;">
                  <el-button type="primary" size="medium" @click="BackList">返回</el-button>
              </div>
              <!-- <div>
                  <el-date-picker style="width: 420px;" @change="PickerChange" v-model="value2" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                  </el-date-picker>
                  <el-button type="primary" size="medium" style="margin-left: 10px;" @click="Reset">重置</el-button>
              </div> -->
          </div>
          <div style="margin-top: 20px;">
              <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
              <Table :columns="listfields" :data-source="listData" :bordered="true" :pagination="false" :loading="loading">
                  <div slot="action" slot-scope="row, index">
                      <div style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 6px">
                          <el-button type="primary" size="mini">查看记录</el-button>
                      </div>
                  </div>
                  <div slot="avatar" slot-scope="row, index">
                      <div style="width: 60px;height: 60px;border-radius: 50%;overflow: hidden;">
                          <img :src="row" style="width: 100%;height: 100%;">
                      </div>
                  </div>
              </Table>
              <pagination :total="total" v-model="page" :pageSize.sync="pagesize" :showQuickJumper="true" @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></pagination>
          </div>
      </div>

  </div>
</template>
<script>
  import { mapGetters, mapState, mapActions } from 'vuex';
  import pagination from '@/common/pagination.vue'
  import Table from 'ant-design-vue/lib/table';
  import modal from 'ant-design-vue/lib/modal';
  import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
  import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
  export default {
      name: 'dynamicList',
      components: {
          pagination,
          Table,
          modal
      },
      data() {
          return {
              listData: [],
              selectedRowKeys: [],
              total: 0, //定义初始有多少条数据
              page: 1, //默认第几页
              pagesize: 10, //一页显示多少条数据
              pickerOptions: {
                  shortcuts: [{
                      text: '最近一周',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                          picker.$emit('pick', [start, end]);
                      }
                  }, {
                      text: '最近一个月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                          picker.$emit('pick', [start, end]);
                      }
                  }, {
                      text: '最近三个月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                          picker.$emit('pick', [start, end]);
                      }
                  }]
              },
              value2: '',
              keyword: '',
              start_date: '',
              end_date: '',
          };
      },
      computed: {
          ...mapState({
              listfields: state => state.dynamic.ForwardFields,
          }),
      },
      watch: {},
      created() {},
      mounted() {
          this.GetFields()
          this.getList()
      },
      methods: {
          ...mapActions({
              GetFields: 'dynamic/GetForwardFields',
          }),
          PickerChange(e) {
              // console.log(e);
              if (e != null) {
                  this.start_date = e[0]
                  this.end_date = e[1]
                  this.getList()
              } else {
                  this.start_date = ''
                  this.end_date = ''
                  this.value2 = ''
                  this.getList()
              }
          },
          BackList() {
              this.$router.push({ name: 'dynamicList' })
          },
          Reset() {
              // this.keyword = ''
              this.start_date = ''
              this.end_date = ''
              this.value2 = ''
              this.getList()
          },
          getList() {
              var that = this
              const id = this.$route.query.id;
              var params = {
                  trend_id: id,
                  // start_date: that.start_date,
                  // end_date: that.end_date,
                  page: that.page,
                  pagesize: that.pagesize,
              }
              that.$http.post('/api/root/dt/TrendSupport/index', params).then(res => {
                  if (res.code === 1) {
                      // console.log(res.data);
                      var data = res.data.list
                      if (data.length > 0) {
                          data.forEach((item, index) => {
                              item.key = item.id
                              item.create_time = this.$moment(item.create_time * 1000).format('yyyy-MM-DD HH:mm')
                              item.phone = item.user_id.phone
                              item.username = item.user_id.username
                              item.avatar = item.user_id.avatar.path
                          })
                          that.total = res.data.total
                          that.listData = data
                          // console.log(res.data);
                      } else {
                          that.listData = []
                      }
                  } else {
                      that.$message.error(res.msg)
                  }
              }).catch(err => {
                  that.$message.error(err.msg ? err.msg : err.toString())
              })
          },
          handlePageChange(pageno, pagesize) { //点击第几页触发的函数
              this.page = pageno;
              this.pagesize = pagesize;
              this.getList()
          },
          onShowSizeChange(current, size) { //改变每页显示条目数的函数
              //pagesize 变化的回调
              this.page = current;
              this.pagesize = size;
              this.getList()
          },
          onSelectChange(selectedRowKeys) {
              // console.log('selectedRowKeys changed: ', selectedRowKeys);
              this.selectedRowKeys = selectedRowKeys;
          },
      },
      
        // 返回按钮
        BackList(){
          this.$router.back(1)
        }
  };
</script>
<style lang="less" scoped>
  .container {
      height: 100%;
      background-color: #f5f5f5;
  }

  .table-breadcrumb {
      height: 6%;
      min-height: 40px;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 0 10px;
  }
</style>